<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的订单</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<link rel="stylesheet" href="../static/css/common/reset.min.css" />
		<link rel="stylesheet" href="../static/css/common/mui.min.css" />
		<link rel="stylesheet" href="../static/css/order/order_history.css?v=2" />
	</head>

	<body>
		<div class="body">
			<div class="header">
				<li @tap="active(0)"><span class="active">借款记录</span></li>
				<li @tap="active(1)"><span>还款记录</span></li>
			</div>
			<!--下拉刷新容器-->
			<div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="display: none;">
				<div class="mui-scroll">
					<div class="content">
						<div class="content_div div_a">
							<li class="display" v-for="item in arr1" @tap="detail(item.orderId)">
								<div>
									<p v-text="item.borrowMoney"></p>
									<span v-text="item.strCreateTime"></span>
								</div>
								<div>
									<span v-text="item.statusDesc" :class="{red:item.statusDesc=='审核失败'}"></span>
									<img src="../static/img/right-row.png" />
								</div>
							</li>
						</div>
						<div class="content_div div_b" style="display: none;">
							<li class="display" v-for="item in arr2">
								<span v-text="item.hadRepay"></span>
								<span v-text="item.strRealRepayTime"></span>
							</li>
						</div>
					</div>
				</div>
			</div>
			<!--无记录-->
			<div class="wujilu" style="display: none;">
				<div class="wujilu_div">
					<div>
						<img src="../static/img/pic_empty.png" />
						<p class="p1">还没有订单记录哦~</p>
						<button class="but" @tap="homePage()">去借款</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../static/js/common.js?v=3"></script>
	<script src="../static/js/bridge.js"></script>
	<script src="../static/js/common/jquery.min.js"></script>
	<script src="../static/js/common/vue.min.js"></script>
	<script type="text/javascript" src="../static/js/common/mui.min.js"></script>

	<script>
		$(function() {
			var domain = apiDomain();
			var webUrl = webDomain();
			var token = getToken();
			new Vue({
				el: ".body",
				data: function() {
					return {
						num: 0,
						pagesize: 10,
						pageNo1: 1,
						arr1: null,
						pageNo2: 1,
						arr2: null
					}
				},
				mounted: function() {
					var that = this;
					this.ajax(that);
					mui('#refreshContainer').pullRefresh().scrollTo(0, 0, 200);
				},
				methods: {
					ajax: function(that) {
						mui.init({
							pullRefresh: {
								container: "#refreshContainer",
								up: {
									height: 100,
									contentdown: "<span></span>上拉加载<span></span>",
									contentrefresh: "正在加载...",
									contentnomore: '<span></span>到底啦<span></span>',
									callback: function() {
										if(that.num == 0) {
											if(that.arr1) {
												that.pagesize = 20;
											} else {
												that.pagesize = 10;
											}
											that.$options.methods.apply(that);
											that.pageNo1++;
										};
										if(that.num == 1) {
											if(that.arr2) {
												that.pagesize = 20;
											} else {
												that.pagesize = 10;
											}
											that.pageNo2++;
											that.$options.methods.repay(that);
										};
									}
								}
							}
						});
					},
					apply: function(that) {
						$.ajax({
							type: "post",
							url: domain + "/order/order_apply_records",
							async: true,
							data: {
								token: token,
								pageNo: that.pageNo1,
								pageSize: that.pagesize
							},
							dataType: "json",
							success: function(res) {
								if(res.status == 2000) {
									if(res.data != "") {
										$("#refreshContainer").show();
										if(!that.arr1) {
											that.arr1 = res.data;
										} else {
											for(var i = 0; i < res.data.length; i++) {
												that.arr1.push(res.data[i]);
											};
										};
										if(that.arr1.length < 9) {
											$(".mui-pull").hide();
										} else {
											$(".mui-pull").show();
										};
										mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //表示数据没了
										mui('#refreshContainer').pullRefresh().refresh(true); //重置上拉控件 
									} else {
										if(!that.arr1) {
											$("#refreshContainer").hide();
											$(".wujilu").show();
										} else {
											mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //表示没有数据
											mui('#refreshContainer').pullRefresh().refresh(false); //禁止上拉控件
										};
									}
								}
							}
						});
					},
					repay: function(that) {
						$.ajax({
							type: "post",
							url: domain + "/order/order_repay_records",
							async: true,
							data: {
								token: token,
								pageNo: that.pageNo2,
								pageSize: that.pagesize
							},
							dataType: "json",
							success: function(res) {
								if(res.status == 2000) {
									if(res.data != "") {
										$("#refreshContainer").show();
										if(!that.arr2) {
											that.arr2 = res.data;
										} else {
											for(var i = 0; i < res.data.length; i++) {
												that.arr2.push(res.data[i]);
											};
										};
										if(that.arr2.length < 9) {
											$(".mui-pull").hide();
										} else {
											$(".mui-pull").show();
										};
										mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //表示数据没了
										mui('#refreshContainer').pullRefresh().refresh(true); //重置上拉控件 
									} else {
										if(!that.arr2) {
											$("#refreshContainer").hide();
											$(".wujilu").show();
										} else {
											mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //表示没有数据
											mui('#refreshContainer').pullRefresh().refresh(false); //禁止上拉控件
										};
									}
								}
							}
						});
					},
					active: function(index) {
						var that = this;
						that.num = index;
						$(".header li").eq(index).find("span").addClass("active").parent().siblings().find("span").removeClass("active");
						$(".content_div").eq(index).show().siblings().hide();
						var token = getToken();
						if(!token) {
							closeAndOpen(1);
							return;
						};
						if(that.num == 0) {
							if(that.arr1 == null) {
								that.pagesize = 10;
								that.$options.methods.apply(that);
							} else {
								that.pagesize = 20;
								$("#refreshContainer").show();
								$(".wujilu").hide();
								mui('#refreshContainer').pullRefresh().refresh(true); //重置上拉控件 
							};
						};
						if(that.num == 1) {
							if(that.arr2 == null) {
								that.pagesize = 10;
								that.$options.methods.repay(that);
							} else {
								that.pagesize = 20;
								$("#refreshContainer").show();
								$(".wujilu").hide();
								mui('#refreshContainer').pullRefresh().refresh(true); //重置上拉控件 
							};
						};
					},
					detail: function(orderId) {
						var that = this;
						skipPage(0, webUrl + "order/order_detail.html?orderId=" + orderId);
						window.location.reload();
					},
					homePage: function() {
						closeAndOpen(2); //去首页
					}
				}
			});
		})
	</script>

</html>